import { DomUtils } from "../utils/DomUtils";

/**
 * 知乎 (https://www.zhihu.com) 网页美化脚本，去除冗余元素，美化页面布局
 * 
 * 测试页面:
 *  - https://zhuanlan.zhihu.com/p/22109508110
 *  - https://zhuanlan.zhihu.com/p/569496874
 */
export class ZhiHu {

    static hostname = ['www.zhihu.com', 'zhuanlan.zhihu.com'];

    /**
     * 脚本入口
     * @param {string} pathname 当前页面的pathname
     */
    main(pathname) {
        if (pathname.startsWith('/question')) {
            // 知乎问答页面
            this.handleQuestion();
        } else if (pathname.startsWith('/p')) {
            // 知乎专栏页面
            this.handleZhuanLan();
        }
    }

    /**
     * 处理知乎问答页面
     */
    handleQuestion() {
        this.handleLoginBox();

        document.querySelector('.QuestionRichText-more')?.click();
        document.querySelectorAll('.QuestionHeader-side').forEach(item => item.remove());
        DomUtils.hide([
            'header',
            '.Question-sideColumn',
            '.QuestionHeader-footer',
            '.QuestionAnswers-answerButton',
            '.css-9jcduz',
            '.Pc-word',
        ]);
        DomUtils.setCss('.Question-mainColumn', { margin: '0 auto', width: '900px' });
        DomUtils.setCss('.QuestionHeader', { 
            margin: '0 auto', 
            width: '900px', 
            minWidth: '900px', 
            marginTop: '20px',
        });
        DomUtils.setCss(document.querySelectorAll('.QuestionHeader-content')[1], { 
            paddingLeft: 0,
            maxWidth: '900px'
        });
        DomUtils.setCss(document.querySelectorAll('.QuestionHeader-main')[1], { width: '100%', paddingRight: '20px' })

        DomUtils.setBackground();
    }

    /**
     * 处理知乎专栏页面
     */
    handleZhuanLan() {
        this.handleLoginBox();

        DomUtils.hide([
            // 顶部header
            '.ColumnPageHeader',
            // 文章下方的点赞、收藏、转发
            '.RichContent-actions',
            '.Post-Row-Content-right',
        ]);
        DomUtils.hide(['.AppHeader', '.css-l44lgl'], 'scale');
        
        // 去除页面最下方的推荐阅读区域
        DomUtils.observe('.Post-Sub.Post-NormalSub', ['childList'], { childList: true }, ({ observer, target, index }) => {
            const recommend = target.querySelector('.Recommendations-Main');
            const comments = target.querySelector('.Comments-container');
            if (recommend) {
                DomUtils.hide(recommend);
                index++;
            }
            if (comments) {
                DomUtils.handleComment(comments, '.css-1k10w8f', '.css-1fo89v5', '暂无评论', () => {
                    // 设置评论区域的宽度设置为100%
                    DomUtils.setCss(comments.parentElement, { width: '100%' });
                });
                index++;
            }
            if (index === 2) {
                observer.disconnect();
            }
        });

        const content = document.querySelector('.Post-content');
        DomUtils.setCss(content, { 
            width: '900px', 
            margin: '0 auto 0', 
            borderRadius: '10px', 
            padding: '20px 30px 30px' 
        });
        DomUtils.setCss(content.querySelector('.css-78p1r9'), { paddingTop: '20px', maxWidth: '100%' });
        DomUtils.setCss('.Post-Row-Content-left', { width: 'auto', borderRadius: '10px' });
        DomUtils.setCss('.App-main', { paddingBottom: 0 });
        DomUtils.setCss('.Question-main', { minHeight: 'auto' });
        
        // 文章区域的宽度设置为100%
        const childList = content.querySelector('article.Post-Main.Post-NormalMain').children;
        Array.from(childList).forEach(item => item.style.width = '100%');

        DomUtils.setBackground();
    }

    /**
     * 处理登录框，去除登录框、弹窗等干扰元素
     */
    handleLoginBox() {
        DomUtils.observe('body', ['childList'], { childList: true }, ({ observer, target, index }) => {
            const modal = target.querySelector('.Modal-wrapper');
            const loginBox1 = target.querySelector('.css-zr60jh');
            const loginBox2 = target.querySelector('.css-i9srcr');
            if (modal) {
                modal.querySelector('.Modal-closeButton')?.click();
                index++;
            }
            if (loginBox1) {
                loginBox1.remove();
                index++;
            }
            if (loginBox2) {
                loginBox2.remove();
                index++;
            }
            if (index === 3) {
                observer.disconnect();
            }
        });
    }
}